/*﻿reset*/

html, body { height: 100%; width: 100%; overflow: hidden; }
html { font-size: calc(100/3840*100vw); }
section { background: white; position: fixed; left: 0; top: 0; bottom: 0; right: 0; z-index: 0; display: none; }
section.fullscreen { top: 0; bottom: 0; }

body { font-size: 0.32rem; background-color: white; }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, table, th, td, button, a, menu { padding: 0; margin: 0; list-style: none; font-family: '微软雅黑',Arial,Helvetica,sans-serif; text-indent: 0px; -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: transparent;  word-break: break-all; word-wrap: break-word;font-family: PingFangSC-Regular, sans-serif; }
i, b { font-weight: normal; font-style: normal; }
h1, h2, h3, h4, h5, h6, th, strong { font-size: 100%; font-weight: normal; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
table { border-collapse: collapse; border-spacing: 0; }
ol, ul { list-style: none; }
cite, em { font-style: normal; }
img, button { border: 0px none; }
a { text-decoration: none; color: #000; }
button { cursor: pointer; background: none; vertical-align: middle; overflow: visible; }
input, button, select, textarea { outline: none; vertical-align: middle; }
textarea { resize: none; }
td.vtop, table.vtop td { vertical-align: top; }


body{ background:#061756;}
.wrap{position:relative;height: 100%;width: 100%;background-size: contain;}


/*菜单触发器*/
#menu_trigger{position: absolute;z-index: 100000;bottom:0;left: 0;width: 3840rem;height: 1px;}
/*菜单*/
#menu{position: absolute;z-index: 101;left: 0;bottom: -11.13rem;height:11.13rem;width: 38.4rem;background: rgba(2,12,15,0.84) }
#menu>img{position: absolute;top: .8rem;right: 1.2rem;height: .92rem;cursor: pointer;}
#menu>ul{position: absolute;bottom: 0;left: 0;display: block;height: 7.18rem;width: 38.4rem;}
#menu>ul>li{position: absolute;bottom:.93rem;height: 8.58rem;width: 6.64rem;font-size: .72rem;color: #fff; }
#menu>ul div{cursor: pointer;}
#menu>ul span{cursor: pointer;}
#menu>ul>li span{position: absolute;top: 3.75rem;width: 6.64rem;text-align: center;}
#menu>ul>li:first-child{left:.68rem; }
#menu>ul>li:first-child>ol{position: absolute;height: 8.58rem;width: 6.64rem;top: 0;left: 0;}
#menu>ul>li:first-child>ol>li{position: absolute;left: 0;top: 0;display: block;height: 4.29rem;width: 6.64rem;}
#menu>ul>li:first-child>ol>li:nth-child(2){position: absolute;top: 4.04rem;left: 0;}
#menu>ul>li:first-child>ol>li:nth-child(2)>div{top: .5rem;}
#menu>ul>li:first-child>ol>li>div{height:3.17rem;width: 5.52rem;position: absolute;left: .56rem;top: .87rem;border-radius: .16rem;}
#menu>ul>li:first-child>ol>li:first-child>span{top: 1.4rem;}
#menu>ul>li:first-child>ol>li:nth-child(2)>span{top: 1.5rem;}
#menu>ul>li:nth-child(2){left: 6.76rem;}
#menu>ul>li:nth-child(3){left:12.84rem;}
#menu>ul>li:nth-child(4){left:18.92rem;}
#menu>ul>li:nth-child(5){left:25rem;}
#menu>ul>li:nth-child(6){left:31.08rem;}
#menu>ul>li>div{height: 6.84rem;width: 5.52rem;position: absolute;left: .56rem;top: .87rem;border-radius: .16rem;}
#menu>ul>li:first-child>ol>li>div{background: linear-gradient(to bottom, #13c7c4, #4be2c2);box-shadow: 0 0 .56rem rgba(19,199,196,0.3);}
#menu>ul>li:first-child>ol>li>div:hover{background: linear-gradient(to bottom, #4be2c2, #13c7c4);}
#menu>ul>li:nth-child(2)>div{background: linear-gradient(to bottom, #ff5858, #ff5776);box-shadow: 0 0 .56rem rgba(255,88,88,0.3);}
#menu>ul>li:nth-child(2)>div:hover{background: linear-gradient(to bottom, #ff5776, #ff5858);}
#menu>ul>li:nth-child(3)>div{background: linear-gradient(to bottom, #5a62f7, #747bff);box-shadow: 0 0 .56rem rgba(90,98,247,0.3);}
#menu>ul>li:nth-child(3)>div:hover{background: linear-gradient(to bottom, #747bff, #5a62f7);}
#menu>ul>li:nth-child(4)>div{background: linear-gradient(to bottom, #ffa113, #fac543);box-shadow: 0 0 .56rem rgba(251,161,19,0.3);}
#menu>ul>li:nth-child(4)>div:hover{background: linear-gradient(to bottom, #fac543, #ffa113);}
#menu>ul>li:nth-child(5)>div{background: linear-gradient(to bottom, #ffa113, #fac543);box-shadow: 0 0 .56rem rgba(251,161,19,0.3);}
#menu>ul>li:nth-child(5)>div:hover{background: linear-gradient(to bottom, #fac543, #ffa113);}
#menu>ul>li:nth-child(6)>div{background: linear-gradient(to bottom, #ffa113, #fac543);box-shadow: 0 0 .56rem rgba(251,161,19,0.3);}
#menu>ul>li:nth-child(6)>div:hover{background: linear-gradient(to bottom, #fac543, #ffa113);}

/*弹幕*/
#barrage{position: absolute;left:0;top: 0;z-index: 100;height: 100%;width: 100%;}
#barrage>ul{display: block;position: absolute;left:0;top: 0;height: 100%;width: 100%;}
.barrage{position:absolute;top: 0;left:38.6rem;height: 1.8rem;width:15rem;}
#barrage1{top: 10rem;}
#barrage2{top: 12.5rem;}
#barrage3{top: 7.5rem;}
#barrage4{top: 15rem;}
#barrage5{top: 5rem;}
.barrage_text{height: 1.8rem;border-radius: .9rem;background: linear-gradient(to right,#ff1e00,#f27818);}
.barrage_text>span{font-size: .72rem;color: #fff;line-height: 1.8rem;margin-left: .8rem;margin-right: 2.8rem;}
.barrage>img{width: 2.86rem;height: 1.9rem;display: block;position: absolute;top: -.32rem;right: -.5rem;}


/*业绩排行榜*/
.bj{position: absolute;z-index: -1;width: 38.4rem;}
.mask{position: absolute;z-index: 10;top: 4.57rem;left: 1.2rem;height: 16.16rem;width: 36rem;}
.mask>span{background: #061756;width: .1rem;height: 16.16rem;position: absolute;top: 0;}
.mask>span:first-child{left: 4.3rem;}
.mask>span:nth-child(2){left: 13rem;}
.mask>span:nth-child(3){left: 22.9rem;}
.mask>span:nth-child(4){left: 31.6rem;}
.detail{float: left;margin-top: 4.57rem;color: #fff;width: 17.4rem;height: 17rem;margin-left: 1.2rem;}

.detail_title{height: 1.56rem;width: 17.4rem;border-radius: .06rem;background: #1a1d37;color: #f9d87c;}
.detail_title ul{height: 1.56rem;width: 17.4rem;}
.detail_title ul li{display: block;float: left;text-align: center;overflow: hidden;line-height: 1.56rem;}
.detail_title ul li:first-child{width: 4.3rem;margin-right: .1rem;}
.detail_title ul li:first-child span:first-child{font-size: .72rem;text-indent: .1rem;}
.detail_title ul li:first-child span:nth-child(2){font-size: .48rem;text-indent: .1rem;}
.detail_title ul li:nth-child(2){width: 8.6rem;margin-right: .1rem;font-size: .6rem;}
.detail_title ul li:nth-child(3){width: 4.3rem;font-size: .6rem;}

.detail_list{display: block;margin-top: .44rem;position: relative;height: 13.81rem;overflow: hidden;}
.detail_list>li{position: absolute;display: block;height: 1.56rem;border-radius: .06rem;background: rgba(255,255,255,0.13);left:0;}
.detail_list>li{top: 14rem;}/*落榜队伍*/
.detail_list>li:first-child{top: 0;}
.detail_list>li:nth-child(2){top: 1.75rem;}
.detail_list>li:nth-child(3){top: 3.5rem;}
.detail_list>li:nth-child(4){top: 5.25rem;}
.detail_list>li:nth-child(5){top: 7rem;}
.detail_list>li:nth-child(6){top: 8.75rem;}
.detail_list>li:nth-child(7){top: 10.5rem;}
.detail_list>li:nth-child(8){top: 12.25rem;}
.detail_list>li>p{line-height: 1.56rem;font-size: .54rem;}
.detail_list>li>p>span{display: block;float: left;text-align: center;}
.detail_list>li>p>span:first-child{width: 4.3rem;height: 1.56rem;margin-right: .1rem;}
.detail_list>li>p>span:nth-child(2){width: 8.6rem;margin-right: .1rem;}
.detail_list>li>p>span:nth-child(3){width: 4.3rem;}

/*巅峰对决*/
#pk_flag{height: 5.93rem;width: 22.6rem;position: absolute; top: 0;left: 7.9rem;z-index: 10;}
#pk_title{height: 8.3rem;width: 12.07rem;position: absolute;top: 0;left: 13.165rem;z-index: 30;}
#pk_detail{position: absolute;top: 4.67rem;left:1.2rem;height: 16.15rem;width: 36rem;overflow: hidden;z-index: 20; }
#pk_detail>div{height: 1.55rem;width: 36rem;margin-bottom: .45rem;}
#pk_detail>div>ul{display: block;}
#pk_detail>div>ul>li{display: block;float: left;height: 1.55rem;line-height: 1.55rem;}
#pk_detail>div>ul>li:first-child{width: 7.9rem;margin-right: .5rem;background: #053ab2;color: #c9dbff;font-size: .72rem;}
#pk_detail>div>ul>li:nth-child(2){width: 7.9rem;margin-right: 3.1rem;background: #e6340e;color: #ffebb5;font-size: .72rem;}
#pk_detail>div>ul>li:nth-child(3){width: 16.6rem;background: #1a1d37;color: #f9d87c;font-size: .6rem;}
#pk_detail>div>ul>li>span{display: block;float: left;height: 1.55rem;width: 100%;text-align: center;}
#pk_detail>div>ul>li:nth-child(3)>span:first-child{width:6.46rem;}
#pk_detail>div>ul>li:nth-child(3)>span:nth-child(2){width: 10.14rem;}

#pk_detail>ul{display: block;position: relative;}
#pk_detail>ul>li{display: block;position: absolute;height:1.55rem;margin-bottom: .25rem;width: 36rem;line-height: 1.55rem;font-size: .55rem;line-height: 1.55rem;color: #f4f9ff;text-align: center;}
#pk_detail>ul>li:last-child{margin-bottom: 0;left: 0;}
#pk_detail>ul>li>div{background: rgba(255,255,255,0.13);}
#pk_detail>ul>li>div:first-child{width: 7.9rem;height: 1.55rem;float: left;margin-right: .5rem;}
#pk_detail>ul>li>div:nth-child(2){width: 7.9rem;height: 1.55rem;float: left;margin-right: 3.1rem;}
#pk_detail>ul>li>div:nth-child(3){width: 16.6rem;height: 1.55rem;float: left;}
#pk_detail>ul>li>div:nth-child(3)>span:first-child{display: block;height: 1.55rem;width: 6.46rem;float: left;}
#pk_detail>ul>li>div:nth-child(3)>span:nth-child(2){display: block;float: left;margin-right: .4rem;}
#pk_detail>ul>li>div:nth-child(3)>div:nth-child(3){display: block;float: left;overflow: hidden;height:.61rem;width: 6.43rem;margin: .47rem .4rem .47rem 0;position: relative;border-radius: .305rem;}
#pk_detail>ul>li>div:nth-child(3)>div:nth-child(3)>img{height:1rem;width: 12.86rem;position: absolute;left: -2rem;top: -.1rem;}
#pk_detail>ul>li>div:nth-child(3)>span:nth-child(4){display: block;float: left;}
#pk_detail>ul>li:first-child{top: 0;}
#pk_detail>ul>li:nth-child(2){top: 1.8rem;}
#pk_detail>ul>li:nth-child(3){top: 3.6rem;}
#pk_detail>ul>li:nth-child(4){top: 5.4rem;}
#pk_detail>ul>li:nth-child(5){top: 7.2rem;}
#pk_detail>ul>li:nth-child(6){top: 9rem;}
#pk_detail>ul>li:nth-child(7){top: 10.8rem;}
#pk_detail>ul>li:nth-child(8){top: 12.6rem;}


/*大区排行*/
.region_detail{position: absolute;left:1.2rem;top: 4.67rem;width: 36rem;height: 16.4rem;z-index: 1}
.region_mask{position: absolute;height: 16.4rem;width: 36rem;left: 1.2rem;top: 4.67rem;z-index: 10;}
.region_mask span{background: #061756;height: 16.16rem;width: .1rem;position: absolute;top: 0;}
.region_mask span:first-child{left: 5.9rem;}
.region_mask span:nth-child(2){left: 14.6rem;}
.region_title{width:36rem;height: 1.56rem;margin-bottom: .44rem;background: #1a1d37; }
.region_title ul>li{height: 1.56rem;display: block;float: left;color: #f9d87c;line-height: 1.56rem;text-align: center;}
.region_title ul>li:first-child{width: 5.9rem;margin-right: .1rem;}
.region_title ul>li:first-child span:first-child{font-size: .72rem;}
.region_title ul>li:first-child span:nth-child(2){font-size: .6rem;}
.region_title ul>li:nth-child(2){width: 8.6rem;margin-right: .1rem;font-size: .6rem;}
.region_title ul>li:nth-child(3){width: 21.3rem;font-size: .6rem;}
.region_ul{position: relative;}
.region_ul li{position: absolute;width: 36rem;height: 1.56rem;background: #26356c;left: 0;color: #fff;font-size: .6rem;line-height: 1.56rem;top: 23.4rem;}
.region_ul li>span:first-child{display:block;float: left;width: 5.9rem;height: 1.56rem;text-align: center;line-height: 1.56rem;}
.region_ul li>span:nth-child(2){display: block;float: left;width: 8.6rem;height: 1.56rem;text-align: center;line-height: 1.56rem;}
.region_ul li>div{display: block;float: left;}
.region_ul li>div>span{display: block;float: left;height: 1.56rem;width: 7.07rem;line-height: 1.56rem;text-align: center;}
.region_ul li>div>div{display: block;float: left;width: 10.74rem;height: .67rem;overflow: hidden;margin-top: .445rem;border-radius: .355rem;position: relative;}
.region_ul li>div>div>img{height: .8rem;width: 21.48rem;position: absolute;left: -5rem;top: -.05rem;}
.region_ul li:first-child{top: 0;}
.region_ul li:nth-child(2){top: 1.8rem;}
.region_ul li:nth-child(3){top: 3.6rem;}
.region_ul li:nth-child(4){top: 5.4rem;}
.region_ul li:nth-child(5){top: 7.2rem;}
.region_ul li:nth-child(6){top: 9rem;}
.region_ul li:nth-child(7){top: 10.8rem;}
.region_ul li:nth-child(8){top: 12.6rem;}


/***************兵王排行*******************/
/*通用*/
#rotate{position: absolute;top: 7.73rem;left: 0;width: 38.4rem;height: 13.8rem;}
#rotate>ul{ position: relative;top: 0;left: 0;height: 13.8rem;width: 38.4rem;}
#rotate>ul>li{display: block;position: absolute;perspective:200rem;}
#rotate>ul>li>div{position: relative;transform-style:preserve-3d;transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-webkit-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;}
#rotate>ul>li>div>img{border: .1rem solid #fff;display: block;box-shadow: 0 0 1.5rem rgba(0,0,0,0.4);}
#rotate>ul>li>div>p{line-height: 2rem;text-align: center;}
.wordart{color: #8c888b;background: -webkit-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);color: transparent;-webkit-background-clip: text;animation: ran 10s linear infinite;}
@keyframes ran { from { backgroud-position : 0 0;} to { background-position : 2000px 0;}}
/*倾斜通用*/
#rotate>ul>li{height: 9rem;width: 7rem;top: 1rem;}
#rotate>ul>li>div>img{height: 8.8rem;width: 7rem;}
#rotate>ul>li>div>p{width: 7rem;font-size: .6rem;}
/*倾斜特点*/
#rotate #king1{left:4.2rem;z-index: 1;opacity:0.5}
#rotate #king2{left:9.2rem;z-index: 2;opacity:0.7}
#rotate #king4{left:21.8rem;z-index: 2;opacity:0.7}
#rotate #king5{left:26.8rem;z-index: 1;opacity:0.5}
/*中心图*/
#rotate #king3{left:15rem;top: 0rem;z-index: 3;opacity:1;height: 10.6rem;width: 8.2rem;}
#rotate #king3>div>img{height: 10.6rem;width: 8rem;}
#rotate #king3>div>p{width: 8rem;font-size: .8rem;}
/*倾斜*/
.rotate_to_left>div{transform: scaleZ(5) rotateY(45deg);
                    -ms-transform: scaleZ(5) rotateY(45deg);
                    -moz-transform: scaleZ(5) rotateY(45deg);
                    -webkit-transform: scaleZ(5) rotateY(45deg);
                    -o-transform: scaleZ(5) rotateY(45deg);}
.rotate_to_mid>div{transform: scaleZ(5) rotateY(0deg);
                   -ms-transform: scaleZ(5) rotateY(0deg);
                   -moz-transform: scaleZ(5) rotateY(0deg);
                   -webkit-transform: scaleZ(5) rotateY(0deg);
                   -o-transform: scaleZ(5) rotateY(0deg);}
.rotate_to_right>div{transform: scaleZ(5) rotateY(-45deg);
                     -ms-transform: scaleZ(5) rotateY(-45deg);
                     -moz-transform: scaleZ(5) rotateY(-45deg);
                     -webkit-transform: scaleZ(5) rotateY(-45deg);
                     -o-transform: scaleZ(5) rotateY(-45deg);}